import React from 'react'

class Home5 extends React.Component {
    constructor(props) {
        super(props); 

        this.state = {
            msg: "这是一个Home组件",
            userName: ''
        }
    }

    run = (event) => {
        alert(this.state.msg); 
        console.log(event);
        alert(event.target);  /*获取执行事件的dom节点 */
        event.target.style.background='red'; 
        //获取dome的属性 
        alert(event.target.getAttribute('aid'));
    }

    getInput = () => {
        alert(this.state.userName);
    }
    inputChange = (e) => {
        console.log(e.target.value); 
        this.setState({
            userName: e.target.value
        })
    }

    render() {
        return (
            <div> 
                {this.state.msg}
                {/* 事件对象 */}
                <h2>事件对象演示</h2>
                <button aid="123" onClick={this.run}>事件对象</button>
                <br/>
                <hr/>
                <h2>表单事件</h2>
                {/**
                 * 获取表单的值 
                 * 1、监听表单的改变事件  onChange 
                 * 2、在改变的事件里面获取表单的输入的值   事件对象
                 * 3、把表单输入的值赋值给userName   this.setState({})
                 * 4、点击按钮的时候获取state里面的userName   this.state.userName
                 */}
                 <input onChange={this.inputChange}/><button onClick={this.getInput}>获取input的值</button>
            </div>
        )
    }
}

export default Home5 